<template>
  <div class="wik-document">
    <div class="wik-document-top">
      <span>共{{ tableData.length }}条记录</span>
      <AuthTable :permissions="resourceButton" key-string="fileList">
        <template #edit>
          <span>
            <el-button type="text" :icon="Plus" color="#333" @click="addProjectAnnexFn">上传</el-button>
          </span>
        </template>
      </AuthTable>
    </div>
    <div class="wik-document-bottom">
      <Table
        :data="tableData"
        :columns="tableColumns"
        :options="{
          headerFixed: true
        }"
      >
        <template #typeId="{ scope }">
          <span>{{ getDictItem("orderAnnexType", scope.typeId) }}</span>
        </template>
        <template #options="{ scope }">
          <el-button v-if="BUTTONS.down" class="ml15" type="text" @click="downFilesOpen(scope.path, scope.originalFileName)">
            下载
          </el-button>
          <el-button v-if="BUTTONS.delete" class="ml15" type="text" @click="deleteAccount(scope)">删除</el-button>
        </template>
      </Table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import Table from "@/components/Table/index.vue";
import { TableData, TableColumn } from "@/components/Table/interface";
import { useDict } from "@/hooks/useDict";
import { downFilesOpen } from "@/utils/index";
import { deleteOrderFiles, getOrderFilesPage, addOrderFileBatch } from "@/api/modules/order";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { useHandleData } from "@/hooks/useHandleData";
import { dialogForm } from "@/utils/dialogForm";
import { ORDER } from "@/constants";
import AuthTable from "@/components/AuthTable/index.vue";

const { getDictItem, getDict } = useDict(["orderAnnexType"]);
const { BUTTONS } = useAuthButtons("designDrawing");
const tableData = ref<TableData[]>([]);
const { orderId, resourceButton } = defineProps({
  orderId: {
    type: String,
    default: ""
  },
  resourceButton: {
    type: Object,
    default: () => {}
  }
});

const config = ref({});

// const emits = defineEmits(["count"]);

const tableColumns = ref<TableColumn[]>([
  {
    type: "index",
    title: "编号",
    key: "serialNumber",
    width: 46
  },
  {
    title: "文档类型",
    key: "typeId"
  },
  {
    title: "附件",
    key: "originalFileName"
  },
  {
    title: "上传者",
    key: "uploadByName"
  },
  {
    title: "上传时间",
    key: "gmtCreate"
  },
  {
    title: "操作",
    key: "options"
  }
]);

const getOrderFilesPageFn = async () => {
  const { data } = await getOrderFilesPage({
    orderId,
    currentPage: 1,
    pageSize: 500
  });
  tableData.value = data.records ?? [];
  // emits("count", {
  //   key: "document",
  //   count: tableData.value.length || 0
  // });
};

// 删除文件
const deleteAccount = async (params: any) => {
  await useHandleData(deleteOrderFiles, { id: params.id }, `删除【${params.originalFileName}】`);
  getOrderFilesPageFn();
};
const addProjectAnnexFn = () => {
  config.value = {
    title: "文档上传",
    width: 30,
    form: {
      formData: {
        orderId,
        typeId: "",
        file: []
      },
      rules: {
        typeId: [{ required: true, message: "请选择订单文件类型" }],
        file: [
          {
            validator: function (rule, value: any, callback: any) {
              console.log(value);
              if (value == "") {
                callback(new Error("请上传订单文件"));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ]
      }
    },
    api: addOrderFileBatch,
    column: [
      {
        type: "select",
        key: "typeId",
        formItemAttribute: {
          label: "订单文件类型"
        },
        attributes: {
          placeholder: "请选择订单文件类型",
          options: getDict("orderAnnexType"),
          multiple: false,
          filterable: true,
          clearable: true
        }
      },
      {
        type: "fileSlice",
        key: "file",
        formItemAttribute: {
          label: "上传附件文件"
        },
        attributes: {
          "prefix-data": ORDER,
          "limit-number": 100,
          accept: "*",
          success: data => {
            console.log(data);
          }
        }
      }
    ],
    transformData: (data: any) => {
      // 批量处理
      return data.file.map((item: any) => {
        return {
          orderId: data.orderId,
          typeId: data.typeId,
          name: item.name,
          path: item.path,
          originalFileName: item.originalFileName
        };
      });
    },

    message: "文件添加成功"
  };
  dialogForm({
    config: config.value,
    successCallback: () => {
      getOrderFilesPageFn();
    }
  });
};

onMounted(() => {
  getOrderFilesPageFn();
});
</script>
<style lang="scss" scoped>
.wik-document {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
  flex-flow: column nowrap;
  padding-bottom: 10px !important;
  box-sizing: border-box;
  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 2px;
    border: 1px solid #f4f4f4;
    box-sizing: border-box;
    border-bottom: none;
    color: #333;
    padding: 0 10px;
    :deep(.el-button) {
      color: #333;
    }
  }
  &-bottom {
    flex: 1;
    height: calc(100% - 36px);
  }
}
</style>
